@page "/MultiSelect-Dropdown/CheckBox"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the checkbox functionalities of the MultiSelect.Click the MultiSelect element and then type a character in the search box. It will display the filtered list items based on the typed characters and then select the multiple values through the checkbox.</p>
</SampleDescription>
<ActionDescription>
    <p>The MultiSelect has built-in support to select the multiple values through checkbox, when the <code>Mode</code> property is set as <code>CheckBox</code>.</p>
    <p>In this sample, the local data is bound to a collection of countries data. Also, provided options for the following:
    <p> To enable/disable the <code>Select All</code> feature in the property panel.</p>
    <p> To enable/disable the <code>DropDown Button</code>feature in the property panel.</p>
    <p> To enable/disable the <code>Selection Reorder</code>feature in the property panel.</p></p>
    <p>The checkbox sample illustrates  using the countries data. </p>
    <p>In this sample, the local data is bound to a collection of countries data. Also, provided options for the following:
    <p> To enable/disable the <code>Select All</code> feature in the property panel.</p>
    <p> To enable/disable the <code>DropDown Button</code>feature in the property panel.</p>
    <p> To enable/disable the <code>Selection Reorder</code>feature in the property panel.</p></p>
    <p>The checkbox sample illustrates  using the countries data. </p>
    <p>More information on the MultiSelect checkbox can be found in the<a href='https://blazor.syncfusion.com/documentation/multiselect-dropdown/checkbox/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-12 checkbox">
    <div class="col-lg-9">
        <div class="content multiselect-checkbox">
            <SfMultiSelect TValue="string[]" TItem="Countries" AllowFiltering="true" Placeholder="Select countries" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" FilterBarPlaceholder="Search countries" PopupHeight="350px">
                <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
            </SfMultiSelect>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="content property-section">
            <table>
                <tr>
                    <td>
                        <SfCheckBox Label="ShowSelectAll" @bind-Checked="@checkSelectAll" ValueChange="@OnSelectAllChange" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <SfCheckBox Label="DropDown Button" @bind-Checked="@dropdownButton" ValueChange="@OnDropDownButtonChange" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <SfCheckBox Label="Selection reorder" @bind-Checked="@selectionReorder" ValueChange="@OnSeletionReorder" TChecked="bool"></SfCheckBox>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    public bool ShowSelectAllCheckBox { get; set; } = true;
    public bool EnableSelectionOrders { get; set; } = true;
    public bool EnableDropDownIcon { get; set; } = true;

    private bool checkSelectAll { get; set; } = true;
    private bool dropdownButton { get; set; } = true;
    private bool selectionReorder { get; set; } = true;

    public void OnSelectAllChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.ShowSelectAllCheckBox = args.Checked;
    }

    public void OnDropDownButtonChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.EnableDropDownIcon = args.Checked;
    }

    public void OnSeletionReorder(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.EnableSelectionOrders = args.Checked;
    }

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}

<style>
    .property-section .e-checkbox-wrapper {
        margin: 10px;
    }

    .control-section.checkbox {
        margin-top: 20px;
    }

    .multiselect-checkbox {
        width: 70%;
        margin-left: 70px;
    }
</style>